<template>

  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>

    <div><br />
    </div>
    <div id="xlsxChart" style="width: 100%;height: 600%;"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  export default {
    data() {
      return {
        h:'',
        ec: {
          lazyLoad: true // 延迟加载
        },

      }
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.h = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图标
      updateChart(){
        const km = this.h.colHeaders
        const sellerName = this.h.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sellerValue = this.h.data.map((item) =>{
          return item.B
        })
        const sellerValue1 = this.h.data.map((item) =>{
          return item.C
        })
        const sellerValue2 = this.h.data.map((item) =>{
          return item.D
        })
        const sellerValue3 = this.h.data.map((item) =>{
          return item.E
        })
        const sellerValue4 = this.h.data.map((item) =>{
          return item.F
        })
        const sellerValue5 = this.h.data.map((item) =>{
          return item.G
        })
        const sellerValue6= this.h.data.map((item) =>{
          return item.H
        })
        const sellerValue7= this.h.data.map((item) =>{
          return item.I
        })
        const sellerValue8= this.h.data.map((item) =>{
          return item.J
        })

        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          title:{
            text:"堆叠图"
          },
          legend: {
            data: km,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},

              magicType: {show: true, type: [ 'stack','bar',  'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: sellerName
          },

          series: [
            {
              name: km[1],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue
            },
            {
              name: km[2],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue1
            },
            {
              name: km[3],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue2
            },
            {
              name: km[4],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue3
            },
            {
              name: km[5],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue4
            },
            {
              name: km[6],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue5
            },
            {
              name: km[7],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue6
            },
            {
              name: km[8],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue7
            },
            {
              name: km[9],
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: sellerValue8
            },


          ]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>

</style>
